Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
vue-scrollto
Advanced tools
Adds a directive that listens for click events and scrolls to elements.
vue-scrollto is a Vue.js directive that allows you to smoothly scroll to elements within your application. It provides a simple and flexible way to implement scrolling animations, making it easier to navigate through different sections of a page.
Basic Usage
This feature allows you to scroll to a specific element on the page by using the v-scroll-to directive. In this example, clicking the button will smoothly scroll to the element with the id 'element'.
<template>
<div>
<button v-scroll-to="'#element'">Scroll to Element</button>
<div id="element" style="margin-top: 1000px;">Target Element</div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto';
export default {
directives: {
scrollTo: VueScrollTo.directive
}
};
</script>
Custom Duration
This feature allows you to customize the duration of the scroll animation. In this example, the scroll to the target element will take 1000 milliseconds (1 second).
<template>
<div>
<button v-scroll-to="{ el: '#element', duration: 1000 }">Scroll to Element</button>
<div id="element" style="margin-top: 1000px;">Target Element</div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto';
export default {
directives: {
scrollTo: VueScrollTo.directive
}
};
</script>
Offset
This feature allows you to set an offset for the scroll position. In this example, the scroll will stop 50 pixels before the target element.
<template>
<div>
<button v-scroll-to="{ el: '#element', offset: -50 }">Scroll to Element</button>
<div id="element" style="margin-top: 1000px;">Target Element</div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto';
export default {
directives: {
scrollTo: VueScrollTo.directive
}
};
</script>
Easing
This feature allows you to specify an easing function for the scroll animation. In this example, the 'ease-in-out' easing function is used to create a smooth scroll effect.
<template>
<div>
<button v-scroll-to="{ el: '#element', easing: 'ease-in-out' }">Scroll to Element</button>
<div id="element" style="margin-top: 1000px;">Target Element</div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto';
export default {
directives: {
scrollTo: VueScrollTo.directive
}
};
</script>
vue-scroll is another Vue.js directive for smooth scrolling. It offers similar functionality to vue-scrollto but with a different API. It allows you to scroll to elements with various options for duration, offset, and easing.
vue-scroll-behavior is a Vue.js plugin that provides smooth scrolling behavior for route navigation. It is more focused on handling scroll positions when navigating between different routes in a Vue application, whereas vue-scrollto is more general-purpose.
vue-smooth-scroll is a lightweight Vue.js plugin for smooth scrolling to elements. It offers basic smooth scrolling functionality with a simple API, similar to vue-scrollto, but with fewer customization options.
Scrolling to elements was never this easy!
This is for vue 2.x
For vue 1.x
use vue-scrollTo@1.0.1
(note the capital T) but keep in mind that the old version depends on jquery
.
vue-scrollto
uses window.requestAnimationFrame
to perform the animations, thus giving the best performance.
Easing is done using bezier-easing - A well tested easing micro-library.
It even knows when the user interrupts, and doesn't force scrolling that would result in bad UX.
This package is available on npm.
If you used this package before, please ensure you are using the right one, since it has been renamed from `vue-scrollTo` to `vue-scrollto`
Using npm:
npm install --save vue-scrollto
Using yarn:
yarn add vue-scrollto
Directly include it in html:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>
When including it in html, it will automatically call `Vue.use` and also set a `VueScrollTo` variable that you can use!
Add vue-scrollto/nuxt
to modules section of nuxt.config.js
{
modules: [
'vue-scrollto/nuxt',
// Or if you have custom options...
['vue-scrollto/nuxt', { duration: 300 }],
]
}
vue-scrollto can be used either as a vue directive, or programatically from your javascript.
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
// You can also pass in the default options
Vue.use(VueScrollTo, {
container: "body",
duration: 500,
easing: "ease",
offset: 0,
force: true,
cancelable: true,
onStart: false,
onDone: false,
onCancel: false,
x: false,
y: true
})
In case you are using the browser version (directly including the script on your page), you can set the defaults with
VueScrollTo.setDefaults({
container: "body",
duration: 500,
lazy: false,
easing: "ease",
offset: 0,
force: true,
cancelable: true,
onStart: false,
onDone: false,
onCancel: false,
x: false,
y: true
})
<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
<div id="element">
Hi. I'm #element.
</div>
If you need to customize the scrolling options, you can pass in an object literal to the directive:
<a href="#" v-scroll-to="{
el: '#element',
container: '#container',
duration: 500,
lazy: false
easing: 'linear',
offset: -200,
force: true,
cancelable: true,
onStart: onStart,
onDone: onDone,
onCancel: onCancel,
x: false,
y: true
}">
Scroll to #element
</a>
Check out the Options section for more details about the available options.
var VueScrollTo = require('vue-scrollto');
var options = {
container: '#container',
easing: 'ease-in',
lazy: false,
offset: -60,
force: true,
cancelable: true,
onStart: function(element) {
// scrolling started
},
onDone: function(element) {
// scrolling is done
},
onCancel: function() {
// scrolling has been interrupted
},
x: false,
y: true
}
var cancelScroll = VueScrollTo.scrollTo(element, duration, options)
// or alternatively inside your components you can use
cancelScroll = this.$scrollTo(element, duration, options)
// to cancel scrolling you can call the returned function
cancelScroll()
The element you want to scroll to.
The container that has to be scrolled.
Default: body
The duration (in milliseconds) of the scrolling animation.
Default: 500
The easing to be used when animating. Read more in the Easing section.
Default: ease
By default targetX/targetY are calculated once at the start of a scroll, however if the target may shift around during the scroll - setting lazy
to false
will force recalculation of targetX/targetY at each scroll step.
Default: true
The offset that should be applied when scrolling. This option accepts a callback function since v2.8.0
.
Default: 0
Indicates if scrolling should be performed, even if the scroll target is already in view.
Default: true
Indicates if user can cancel the scroll or not.
Default: true
A callback function that should be called when scrolling has started. Receives the target element as a parameter.
Default: noop
A callback function that should be called when scrolling has ended. Receives the target element as a parameter.
Default: noop
A callback function that should be called when scrolling has been aborted by the user (user scrolled, clicked etc.). Receives the abort event and the target element as parameters.
Default: noop
Whether or not we want scrolling on the x
axis
Default: false
Whether or not we want scrolling on the y
axis
Default: true
Easing is calculated using bezier-easing so you can pass your own values into options.easing
in the form of an array with 4 values, or you can use any of the default easings by referencing their names as strings (ease
, linear
, ease-in
, ease-out
, ease-in-out
).
vue-scrollto uses the following values for the default easings:
let easings = {
'ease': [0.25, 0.1, 0.25, 1.0],
'linear': [0.00, 0.0, 1.00, 1.0],
'ease-in': [0.42, 0.0, 1.00, 1.0],
'ease-out': [0.00, 0.0, 0.58, 1.0],
'ease-in-out': [0.42, 0.0, 0.58, 1.0]
}
If you need to scroll multiple containers simultaneously, you can import the scroller factory directly and create multiple instances. (Using the default scrollTo
methods allows for only one scroll action at a time for performance reasons.)
import {scroller} from 'vue-scrollto/src/scrollTo'
const firstScrollTo = scroller()
const secondScrollTo = scroller()
firstScrollTo('#el1')
secondScrollTo('#el2')
MIT
FAQs
Adds a directive that listens for click events and scrolls to elements.
The npm package vue-scrollto receives a total of 92,607 weekly downloads. As such, vue-scrollto popularity was classified as popular.
We found that vue-scrollto demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.